import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_architecture/constant/route_constants.dart';
import 'package:flutter_architecture/routes/routes.dart';
import 'package:flutter_architecture/utils/log_util.dart';
import 'package:flutter_architecture/utils/shared_preferences_util.dart';
import 'package:logger_flutter/logger_flutter.dart';
import 'package:flutter_architecture/utils/screen_util.dart';
import 'package:logger/logger.dart';
import 'package:fluro/fluro.dart';
import 'package:liquid_swipe/liquid_swipe.dart';
/// splash 页面
/// @author: dingwen
/// @date: 2020/12/28

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  ///当前图片显示的下标
  int _currentIndex = 0;

  ///背景图片
  List<String> _imageList = [
    'images/sp01.png',
    'images/sp02.png',
    'images/sp03.png',
    'images/sp04.png'
  ];

  ///当前屏幕宽高
  double width;
  double height;


  ///水滴动画切换
  LiquidController _liquidController = LiquidController();


  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    height = MediaQuery.of(context).size.height;
    ScreenUtil.instance = ScreenUtil(width: 1080, height: 2340)..init(context);
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: LogConsoleOnShake(
        dark: true,
        child: Scaffold(
          backgroundColor: Colors.white,
          body: Stack(
            children: [
              //第一层的背景图片
              _buildFirst(width, height),
              //第二层的点指示
              _buildSecond(),
              //第三层的去首页按钮
              _buildThird(),
            ],
          ),
        ),
      ),
    );
  }

  ///构建第三层的button
  Positioned _buildThird() {
    return Positioned(
      left: sWidth(0),
      right: sWidth(0),
      bottom: sHeight(60),
      height: sHeight(88),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedContainer(
            duration: Duration(milliseconds: 600),
            //图片显示到最后一张则显示去去首页按钮
            height: _currentIndex == _imageList.length - 1
                ? sHeight(88)
                : sHeight(0),
            width: _currentIndex == _imageList.length - 1
                ? sWidth(200)
                : sWidth(0),
            child: ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  //设置按下时的背景颜色
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.white54;
                  }
                  //默认不使用背景颜色
                  return Colors.white;
                }),
              ),
              child: Center(child: Text('去首页',style: TextStyle(fontSize: sFontSize(32),color: Colors.deepOrange),)),
              onPressed: () {
                SPUtil.save("flutter_architecture_isFirst", true);
//                Routes.push(context, settings: RouteSettings(name: my_page));
                Routes.pageTo(context, navigation_drawer__page);
                log(
                    level: Level.info,
                    fileName: 'splash.dart',
                    functionName: '_buildThird',
                    message: '点击去首页，存储用户第一次进入App标识');
                log(
                    level: Level.info,
                    fileName: 'splash.dart',
                    functionName: '_buildThird',
                    message: 'splash_page跳转到my_page');
              },
            ),
          ),
        ],
      ),
    );
  }

  ///构建第一层的背景图片
  Positioned _buildFirst(width, height) {

    //Liquid实现

    return Positioned.fill(
        child: LiquidSwipe(
          pages: _buildFirstChild(width, height),
          //动画样式
          waveType: WaveType.liquidReveal,
          //动画控制器
          liquidController: _liquidController,
          //执行动画时忽略用户手势
          ignoreUserGestureWhileAnimating: true,
          //关闭循环播放
          enableLoop: false,
          onPageChangeCallback: (index)=> setState(()=> _currentIndex = index),
        ));

    //PageView实现
    return Positioned.fill(
        child: PageView(
      onPageChanged: (index) => setState(() => _currentIndex = index),
      children: _buildFirstChild(width, height),
    ));
  }

  _buildFirstChild(width, height) {
    List<Widget> widgets = [];
    _imageList.forEach((imgStr) {
      widgets.add(Image.asset(
        '$imgStr',
        width: width,
        height: height,
        fit: BoxFit.fill,
      ));
    });
    return widgets;
  }

  ///构建第二层的指示器
  _buildSecond() {
    return Positioned(
        left: sWidth(0),
        right: sWidth(0),
        bottom: sHeight(60),
        height: sHeight(44),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _buildSecondChild(),
        ));
  }

  List<Widget> _buildSecondChild() {
    List<Widget> widgets = [];
    for (int index = 0; index < _imageList.length; index++) {
      widgets.add(AnimatedContainer(
        height: sHeight(12),
        width: index == _currentIndex ? sWidth(40) : sWidth(12),
        margin: EdgeInsets.only(left: sWidth(16)),
        duration: Duration(milliseconds: 600),
        decoration: BoxDecoration(
            color: Colors.deepOrange,
            borderRadius: BorderRadius.all(Radius.circular(sWidth(10)))),
      ));
    }
    return widgets;
  }
}
